<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{font-size: 50px;color: green;}
    </style>
</head>
<body>
    <div class="box" style="width:100px;height:200px;background: red;">
        hello
    </div>
</body>
<script>
    var obox = document.querySelector(".box");

    // 行内样式的获取
    console.log(obox.style);

    console.log(obox.style[0]);
    console.log(obox.style[1]);

    console.log(obox.style.width)
    console.log(obox.style.height)
    console.log(obox.style.background)
    console.log(obox.style.border)
    
    obox.style.width = "200px";
    obox.style.background = "yellow"
    obox.style.border = "solid 10px red"
    
    obox.style.background = "";
    
    // 行内样式操作无法获取非行内



    // 非行内
    console.log(getComputedStyle(obox))

    console.log(getComputedStyle(obox)[0])
    console.log(getComputedStyle(obox)[1])
    
    console.log(getComputedStyle(obox).fontSize)
    console.log(getComputedStyle(obox).color)
    

    // getComputedStyle(obox).color = "red";
    

    // 非行内样式操作可以获取行内样式
    console.log(getComputedStyle(obox).width)
    console.log(getComputedStyle(obox).height)
    console.log(getComputedStyle(obox).background)

    console.log("=======");

    console.log(getStyle(obox, "width"));
    console.log(getStyle(obox, "background"));
    console.log(getStyle(obox, "color"));

    // 获取非行内样式的兼容处理
    function getStyle(ele, attr){
        if(ele.currentStyle){
            return ele.currentStyle[attr];
        }else{
            return getComputedStyle(obox)[attr];
        }
    }
</script>
</html>